<template>
  <el-card class="abnormal-card">
    <div slot="header" class="clearfix">
      <span>异常人数汇总</span>
    </div>
    <div class="statistics-content">
      <div class="stat-item">
        <div class="stat-label">
          晚归人数
          <div class="stat-number">{{ latePersonCount }}</div>
        </div>
        <el-progress :percentage="latePercentage" :format="() => ''" />
      </div>
      <div class="stat-item">
        <div class="stat-label">
          未归人数
          <div class="stat-number">{{ absencePersonCount }}</div>
        </div>
        <el-progress :percentage="absencePercentage" :format="() => ''" />
      </div>
      <div class="stat-item">
        <div class="stat-label">
          无通行数据
          <div class="stat-number">{{ noPassPersonCount }}</div>
        </div>
        <el-progress :percentage="noPassPercentage" :format="() => ''" />
      </div>
      <div class="stat-item">
        <div class="stat-label">
          早出人数
          <div class="stat-number">{{ earlyPersonCount }}</div>
        </div>
        <el-progress :percentage="earlyPercentage" :format="() => ''" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    personCount: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 从props中获取总人数
    totalPersonCount() {
      return this.personCount.total || 0;
    },
    // 晚归人数
    latePersonCount() {
      return this.personCount['晚归'] || 0;
    },
    // 未归人数
    absencePersonCount() {
      return this.personCount['未归'] || 0;
    },
    // 无通行数据人数
    noPassPersonCount() {
      return this.personCount['无通行数据'] || 0;
    },
    // 早出人数
    earlyPersonCount() {
      return this.personCount['早出'] || 0;
    },
    // 计算百分比
    latePercentage() {
      return this.totalPersonCount > 0 ? (this.latePersonCount / this.totalPersonCount) * 100 : 0;
    },
    absencePercentage() {
      return this.totalPersonCount > 0 ? (this.absencePersonCount / this.totalPersonCount) * 100 : 0;
    },
    noPassPercentage() {
      return this.totalPersonCount > 0 ? (this.noPassPersonCount / this.totalPersonCount) * 100 : 0;
    },
    earlyPercentage() {
      return this.totalPersonCount > 0 ? (this.earlyPersonCount / this.totalPersonCount) * 100 : 0;
    }
  }
};
</script>

<style scoped>
.abnormal-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.statistics-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 20px;
}

.abnormal-card .el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.abnormal-card .el-card__header .clearfix span {
  font-size: 16px;
  /* font-weight: 600; */
  color: #303133;
}

.statistics-content {
  padding: 20px;
}

.stat-item {
  margin-bottom: 20px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

/* 为不同类型的异常添加不同的颜色标识 */
.stat-item:nth-child(1) .stat-number {
  color: #ff6700; /* 晚归 - 橙色 */
}

.stat-item:nth-child(2) .stat-number {
  color: #f56c6c; /* 未归 - 红色 */
}

.stat-item:nth-child(3) .stat-number {
  color: #909399; /* 无通行数据 - 灰色 */
}

.stat-item:nth-child(4) .stat-number {
  color: #409eff; /* 早出 - 蓝色 */
}

.stat-number {
  font-size: 22px;
  font-weight: 600;
}

/* 优化进度条样式 */
.el-progress {
  height: 8px;
  margin-top: 5px;
}

.el-progress-bar__outer {
  height: 8px;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.el-progress-bar__inner {
  height: 8px;
  border-radius: 4px;
}

/* 为不同类型的异常设置不同的进度条颜色 */
.stat-item:nth-child(1) .el-progress-bar__inner {
  background-color: #ff6700;
}

.stat-item:nth-child(2) .el-progress-bar__inner {
  background-color: #f56c6c;
}

.stat-item:nth-child(3) .el-progress-bar__inner {
  background-color: #909399;
}

.stat-item:nth-child(4) .el-progress-bar__inner {
  background-color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .statistics-content {
    padding: 15px;
  }

  .stat-item {
    margin-bottom: 15px;
    padding: 10px;
  }

  .stat-number {
    font-size: 20px;
  }

  .stat-label {
    font-size: 13px;
  }
}
</style>
